import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../widget/my_image.dart';

class CheckIn extends StatefulWidget {
  @override
  _CheckInState createState() => _CheckInState();
}

class _CheckInState extends State<CheckIn> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          leading: BackButton(
            color: Colors.white,
          ),
          backgroundColor: Colors.red,
          title: Text(
            '签到',
            style: TextStyle(
                color: Colors.white,
                fontSize: 30.sp,
                fontWeight: FontWeight.bold),
          ),
          centerTitle: true),
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Stack(
              children: [
                Container(
                  height: 300.w,
                  alignment: Alignment.topCenter,
                  padding: EdgeInsets.only(left: 50.w,top: 60.w),
                  decoration: BoxDecoration(color: Colors.red),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Row(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(25)),
                            child: Container(
                              width: 100.w,
                              height: 100.w,
                              child: MyImage(
                                imgSrc:
                                    'https://c-ssl.duitang.com/uploads/item/201508/07/20150807155231_xRHui.thumb.1000_0.jpeg',
                              ),
                            ),
                          ),
                          SizedBox(
                            width: 20.w,
                          ),
                          Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                '王志强',
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                    fontSize: 30.sp,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.white),
                              ),
                              SizedBox(height: 10.w),
                              Container(
                                width: 140.w,
                                height: 50.w,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(10.w),
                                    color: Colors.orangeAccent),
                                child: Text(
                                  '积分：10',
                                  style: TextStyle(color: Colors.white),
                                ),
                              )
                            ],
                          )
                        ],
                      ),
                      Container(
                        width: 150.w,
                        height: 70.w,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(45.w),
                                bottomLeft: Radius.circular(45.w))),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Icon(
                              Icons.subject,
                              color: Colors.orangeAccent,
                              size: 40.sp,
                            ),
                            Text(
                              '明细',
                              style: TextStyle(
                                  color: Colors.orangeAccent,
                                  fontSize: 30.sp),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
                Positioned(
                  bottom: 0.w,
                  child: Container(
                    height: 80.w,
                    width: 700.w,
                    margin: EdgeInsets.only(left: 25.w),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(20.w),
                            topRight: Radius.circular(20.w)),
                        color: Colors.white),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text('第一天',style: TextStyle(
                          color: Colors.grey
                        ),),
                        Text('第二天',style: TextStyle(
                            color: Colors.grey
                        ),),
                        Text('第三天',style: TextStyle(
                            color: Colors.grey
                        ),),
                        Text('第四天',style: TextStyle(
                            color: Colors.grey
                        ),),
                        Text('第五天',style: TextStyle(
                            color: Colors.grey
                        ),),
                        Text('第六天',style: TextStyle(
                            color: Colors.grey
                        ),),
                        Container(
                          padding: EdgeInsets.only(right:15.w,left:15.w,),
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15.w),
                            color: Colors.orangeAccent,
                          ),
                          child: Text('奖励',style: TextStyle(
                            color: Colors.white
                          ),),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              height: 60.w,
              width: 700.w,
              margin: EdgeInsets.only(left: 25.w,right: 25.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Icon(Icons.star_border,color: Colors.grey,size: 55.sp,),
                  Icon(Icons.star_border,color: Colors.grey,size: 55.sp,),
                  Icon(Icons.star_border,color: Colors.grey,size: 55.sp,),
                  Icon(Icons.star_border,color: Colors.grey,size: 55.sp,),
                  Icon(Icons.star_border,color: Colors.grey,size: 55.sp,),
                  Icon(Icons.star_border,color: Colors.grey,size: 55.sp,),
                  Icon(Icons.star_border,color: Colors.grey,size: 55.sp,),
                ],
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              height: 40.w,
              width: 700.w,
              margin: EdgeInsets.only(left: 25.w,right: 25.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text('+10',style: TextStyle(
                    color: Colors.grey,fontSize: 30.sp
                  ),),
                  Text('+20',style: TextStyle(
                      color: Colors.grey,fontSize: 30.sp
                  ),),
                  Text('+30',style: TextStyle(
                      color: Colors.grey,fontSize: 30.sp
                  ),),
                  Text('+40',style: TextStyle(
                      color: Colors.grey,fontSize: 30.sp
                  ),),
                  Text('+50',style: TextStyle(
                      color: Colors.grey,fontSize: 30.sp
                  ),),
                  Text('+60',style: TextStyle(
                      color: Colors.grey,fontSize: 30.sp
                  ),),
                  Text('+100',style: TextStyle(
                      color: Colors.grey,fontSize: 30.sp
                  ),),
                ],
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              width: 300.w,
              height:75.w,
              margin: EdgeInsets.symmetric(horizontal: 150.w,vertical: 50.w),
              child: FlatButton(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(50.w)
                ),
                onPressed: (){},
                color: Colors.red,
                child: Text('立即签到',style: TextStyle(
                  color: Colors.white,
                  fontSize: 30.sp
                ),),
              ),
            ),
          ),SliverToBoxAdapter(
            child:Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Icon(Icons.attach_file,size: 80.sp,color: Colors.grey,),
                    Icon(Icons.attach_file,size: 80.sp,color: Colors.grey,),
                    Icon(Icons.attach_file,size: 80.sp,color: Colors.grey,),
                  ],
                ),
                SizedBox(height:45.w),
                Text('已累计签到',style: TextStyle(
                  fontSize: 35.sp,color: Colors.black54
                ),),
                SizedBox(height:60.w),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                   Stack(
                     children: [
                       Container(
                         height:140.w,
                         width: 90.w,
                         alignment: Alignment.center,
                         decoration: BoxDecoration(
                             color: Colors.red,
                             borderRadius: BorderRadius.circular(20.w)
                         ),
                         child: Text('0',style: TextStyle(
                             fontSize: 90.sp,
                             color: Colors.white
                         ),),
                       ),
                       Positioned(
                         top:70.w,
                         child: Container(
                           width: 100.w,
                           height:5.w,
                           color: Colors.white.withAlpha(75),
                         ),
                       )
                     ],
                   ),
                    SizedBox(width: 30.w,),
                    Stack(
                      children: [
                        Container(
                          height:140.w,
                          width: 90.w,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: Colors.red,
                              borderRadius: BorderRadius.circular(20.w)
                          ),
                          child: Text('0',style: TextStyle(
                              fontSize: 90.sp,
                              color: Colors.white
                          ),),
                        ),
                        Positioned(
                          top:70.w,
                          child: Container(
                            width: 100.w,
                            height:5.w,
                            color: Colors.white.withAlpha(75),
                          ),
                        )
                      ],
                    ),
                    SizedBox(width: 30.w,),
                    Stack(
                      children: [
                        Container(
                          height:140.w,
                          width: 90.w,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: Colors.red,
                              borderRadius: BorderRadius.circular(20.w)
                          ),
                          child: Text('1',style: TextStyle(
                              fontSize: 90.sp,
                              color: Colors.white
                          ),),
                        ),
                        Positioned(
                          top:70.w,
                          child: Container(
                            width: 100.w,
                            height:5.w,
                            color: Colors.white.withAlpha(75),
                          ),
                        )
                      ],
                    ),
                    SizedBox(width: 15.w,),
                    Text('天',style: TextStyle(
                      fontSize: 30.sp
                    ),)
                  ],
                ),
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 70.w,vertical: 60.w),
                  child: Text('据说连续签到第七天可获得超额积分，一定要坚持签到哦~~~',textAlign:TextAlign.center,style: TextStyle(
                      fontSize: 30.sp,
                    color: Colors.black54
                  ),),
                ),

              ],
            ),
          ),
          SliverToBoxAdapter(
            child: ListTile(
              title: Text('签到奖励'),
              subtitle: Text('2020/8/5 11:42'),
              trailing: Text(
                '+10.00',
                style: TextStyle(fontSize: 40.sp, color: Colors.red),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
